<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>

</body>
<script>
	{
		// 1- 对象解构赋值基本语法
		// const {a, b, c} = {a: 1, b: 2, c: 3};
		// console.log(a,b,c);// 1 2 3
		//
		// const obj = {
		// 	userName:"zhangsan",
		// 	age:12
		// }
		// const {userName,age} = obj;
		// console.log(userName,age);// zhangsan 12
	}
	{
		// 2- 顺序不用一一对应
		// const {c,a,b} = {a:1,b:2,c:3};
		// console.log(a,b,c);// 1 2 3
	}
	{
		// 3- = 右侧可以是一个常量或变量
		// const obj = {a:1,b:2,c:3};
		// let info = {userName:"lisi",age:12};
		//
		// let {a,b,c} = obj;// 右侧是常量
		// let {userName,age} = info;// 右侧是变量
		// console.log(a,b,c);// 1 2 3
		// a = 100;
		// console.log(a,b,c);// 100 2 3
	}
	{
		// 4- 嵌套对象解构
		// const {a,b,c,info} = {a:1,b:2,c:3,info:{userName:"zhangsan",age:12}};
		// console.log(a,b,c,info);// 1 2 3 {userName:"zhangsan",age:12}
		
		// const {a,b,c,info} = {a:1,b:2,c:3,info:{userName:"zhangsan",age:12}};
		// const {userName,age} = info;// 不建议
		// console.log(a,b,c,userName,age);// 1 2 3 zhangsan 12
		
		// : 可以将左侧的数据源进行解构，info不会作为常量处理，它扮演的角色是数据源，解析目标为userName,age
		// const {a,b,c,info:{userName,age}} = {a:1,b:2,c:3,info:{userName:"zhangsan",age:12}};
		// console.log(a,b,c,userName,age);// 1 2 3 zhangsan 12
	}
	{
		// 5- 可忽略解构源的属性
		// // 忽略a,b,d,只将c属性进行解析
		// const {c} = {a:1,b:2,c:3,d:4};
		// console.log(c);// 3
	}
	{
		// 6- 剩余运算符:将未解构的组成一个新的对象
		// // const {b,...c} = {a:1,b:2,c:3,d:4,e:5,f:6};
		// // console.log(b,c);//2 {a: 1, c: 3, d: 4, e: 5, f: 6}
		//
		// // 将未解构的组成一个新的对象c
		// // const {b,a,f,...c} = {a:1,b:2,c:3,d:4,e:5,f:6};
		// // console.log(a,b,f,c);//1 2 6 {c: 3, d: 4, e: 5}
		//
		// // 异常：剩余运算符必须放置在后边：const {e,a,...my} = {a:1,b:2,c:3,d:4,e:5,f:6};
		// const {e,...my,a} = {a:1,b:2,c:3,d:4,e:5,f:6};// 异常
		// console.log(a,e,my);
	}
	{
		// 7- 不完全解构：变量名称在对象中不存在
		// const {a,b,c,e} = {a:1,b:2,c:3};
		// console.log(a,b,c,e);// 1 2 3 undefined
	}
	{
		// 8- 解构默认值(常用)
		// 如果数据源中没有属性e，那么变量e的值会使用默认值100，如果有属性e,那么e的值为数据源的对应属性值
		// const {a,b,c=300,e=100} = {a:1,b:2,c:3};
		// console.log(a,b,c,e);// 1 2 3 100
	}
	{
		// 9- 为非同名局部变量赋值 ，可避免命名冲突
		// const obj = {
		// 	userName:"zhangsan",
		// 	age:12
		// };
		// let userName = "wangwu";
		// // 将obj下的userName属性值赋值给常量userName2
		// const {userName:userName2,age} = obj;
		// console.log(userName,userName2,age);// wangwu zhangsan 12
	}
	{
		// 10- 函数传参数
		// 未使用解析赋值
		// function fn(obj){
		// 	// 同质化代码
		// 	console.log(obj.a,obj.b,obj.c)
		// }
		// fn({a:1,b:2,c:3});
		
		// 解构赋值
		// function fn({a,b,c,d,e=100,f=90}){
		// 	console.log(a,b,c,d,e,f)// 1 2 3 undefined 900
		// }
		// fn({a:1,b:2,c:3,f:900});
	}
	{
		const obj = {
			userName:"zhangsan",
			age:12
		}
		let userName = "lisi";
		// 将变量的属性值lisi更改为zhangsan
		({userName} = obj);
		
	}
</script>
</html>